<template>
    <view class="list" v-if="data">
        <view class="list-top">
            <view>
                <view class="line"><text></text>{{ data.PayWayName }}</view>
                <view class="price">¥{{ data.PriceSum }}</view>
            </view>
            <view>
                <view class="time">{{ data.AddTime }}</view>
                <view class="state">{{ data.StateName }}</view>
            </view>
        </view>
        <view class="list-data">
            <view><text>交易类型</text><text>付款</text></view>
            <view v-if="data.BankInfo">
                <text>开户银行</text><text>{{ data.BankInfo.BankTypeName }}{{ data.BankInfo.Branch }}</text></view
            >
            <view v-if="data.BankInfo"
                ><text>账户名称</text><text>{{ data.BankInfo.AccountName }}</text></view
            >
            <view v-if="data.BankInfo"
                ><text>银行账号</text><text>{{ data.BankInfo.Number }}</text></view
            >
            <view
                ><text>流水号</text><text>{{ data.OutTradeNo }}</text></view
            >
            <view v-if="data.PayWay == 0"
                ><text>备注信息</text><text>{{ data.TransactionId ? data.TransactionId : "无" }}</text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        data: {
            type: Object,
            default: {},
        },
    },
    components: {},
    data() {
        return {}
    },
    methods: {},
}
</script>

<style lang="scss">
.list {
    background: #ffffff;
    border-radius: 24rpx;
    margin-bottom: 28rpx;

    .list-top {
        height: 124rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-bottom: 1rpx solid #ebebeb;

        .line {
            display: flex;
            align-items: center;
            font-size: 28rpx;
            font-weight: bold;
            color: #333;

            text {
                width: 8rpx;
                height: 28rpx;
                background: #fa6400;
                border-radius: 4rpx;
                margin-right: 16rpx;
            }
        }

        .price {
            font-size: 32rpx;
            font-weight: bold;
        }

        .time {
            color: #333333;
            font-size: 24rpx;
        }

        .state {
            color: #f7b500;
            font-size: 24rpx;
        }

        & > view {
            display: flex;
            justify-content: space-between;
            padding: 2rpx 24rpx;
        }
    }

    .list-data {
        padding: 24rpx;

        & > view {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 6rpx 0;

            text {
                color: $color-gray-2;
            }
        }
    }
}
</style>
